
var Label = require('../label');
/**
 * FormItem组件
 * @class FormItem
 * @extends Basic
 * @author 杜慧玲
 *
 *  @param  [label] 标题
 *
 *  @param  dmbind 必填，对应输入框绑定的UDM的dmbind
 *
 *  @param  [className] 设置class样式
 *
 *  @param  [correctMsg] 校验通过的提示文字
 *
 *  @param  [unValidate] 布尔值，不校验，默认false
 *
 * 示例：
 *
 *     @example
 *     <FormItem dmbind="UDM1" label="手机号：">
 *          <Input dmbind="UDM1"/>
 *     </FormItem>
 */
var FormItem = React.createClass({
    getDefaultProps:function(){
        return{
            id:"",
            label:"",
            dmbind:"",
            className:"",
            correctMsg:'',
            unValidate:false
        }
    },
    getInitialState:function(){
        return {
            tipHide:true,
            text:'',
            msgClass:'ucs-form-explain'
        }
    },
    componentDidMount:function(){
        var ICON_FONT_CONST = window.UI_CONST.ICON_FONT_CONST;
        var iconCorrect = ICON_FONT_CONST['icon-correct'];

        var _udmid = this.props.dmbind;
        var _this = this;
        UEventHub.on(_udmid + UI_EVENT_CONST.ONVALIDATE_EVENT,function(msg){
            if(_this.props.unValidate) return;
            setTimeout(function () {
                var _msg = msg;
                if(!_msg){
                    _this.refs[_this.props.dmbind].className = "ucs-form-explain success";
                    _this.refs[_this.props.dmbind].innerHTML = '<div><i class="iconfont ">'+iconCorrect+'</i>'+_this.props.correctMsg+'</div>';
                }else if(_msg == "clean"){
                    _this.refs[_this.props.dmbind].className = "ucs-form-explain";
                    _this.refs[_this.props.dmbind].innerHTML = '<div></div>';
                }else{
                    _this.refs[_this.props.dmbind].className = "ucs-form-explain";
                    _this.refs[_this.props.dmbind].innerHTML = '<div><i class="iconfont icon-error"></i>'+_msg+'</div>';
                }
            },0)

        }.bind(this));

        GiraffObjectManager[_this.props.dmbind].reset = function(){
            return _this.clearValue();
        }

    },
    getChildrenRefs:function(ref){
        return this.refs[ref];
    },
    clearValue:function(){
        var _this = this;
        GiraffObjectManager[_this.props.dmbind].value = "";
        _this.setState({
            msgClass:"ucs-form-explain hide"
        });
    },
    render:function(){
        var _this = this;
        return(
            <div {...this.props} className={"ucs-form-group " + this.props.className} id={this.props.id}>
                <Label value={this.props.label}/>
                {
                    this.props.children.map(function(item,idx){
                        if(item.tagName == "INPUT" || item.tagName == "TEXTAREA" || item.displayName == "Input" || item.displayName == "Password" || item.displayName == "Textarea"){
                            return React.cloneElement(item,{
                                onFocus:function(){
                                    _this.refs[_this.props.dmbind].className = "ucs-form-explain hide";
                                },
                                value:GiraffObjectManager[_this.props.dmbind].value
                            });
                        }else{
                            return item;
                        }
                    })
                }
                <div className={this.state.msgClass} ref={this.props.dmbind}>{this.state.text}</div>
            </div>
        )
    }
});

module.exports = FormItem;